<!DOCTYPE html>
<html>
<head>
  <style>
    .vega-actions a {
        margin-right: 12px;
        color: #757575;
        font-weight: normal;
        font-size: 13px;
    }
    .error {
        color: red;
    }
  </style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@4"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@2.6.0"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@3"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
      var spec = {"config": {"view": {"width": 400, "height": 300}}, "layer": [{"data": {"name": "data-bbc3654f178c67380d058f0b1168f7eb"}, "mark": {"type": "area", "color": "yellow"}, "encoding": {"opacity": {"value": 0.3}, "x": {"type": "quantitative", "field": "Time"}, "y": {"type": "quantitative", "field": "Neutral"}}}, {"data": {"name": "data-bbc3654f178c67380d058f0b1168f7eb"}, "mark": {"type": "area", "color": "red"}, "encoding": {"opacity": {"value": 0.3}, "x": {"type": "quantitative", "field": "Time"}, "y": {"type": "quantitative", "field": "Disgust"}}}, {"data": {"name": "data-bbc3654f178c67380d058f0b1168f7eb"}, "mark": {"type": "area", "color": "orange"}, "encoding": {"opacity": {"value": 0.3}, "x": {"type": "quantitative", "field": "Time"}, "y": {"type": "quantitative", "field": "Fear"}}}, {"data": {"name": "data-bbc3654f178c67380d058f0b1168f7eb"}, "mark": {"type": "area", "color": "green"}, "encoding": {"opacity": {"value": 0.3}, "x": {"type": "quantitative", "field": "Time"}, "y": {"type": "quantitative", "field": "Happy"}}}, {"data": {"name": "data-bbc3654f178c67380d058f0b1168f7eb"}, "mark": {"type": "area", "color": "purple"}, "encoding": {"opacity": {"value": 0.3}, "x": {"type": "quantitative", "field": "Time"}, "y": {"type": "quantitative", "field": "Sad"}}}, {"data": {"name": "data-bbc3654f178c67380d058f0b1168f7eb"}, "mark": {"type": "area", "color": "pink"}, "encoding": {"opacity": {"value": 0.3}, "x": {"type": "quantitative", "field": "Time"}, "y": {"type": "quantitative", "field": "Surprise"}}}, {"data": {"name": "data-bbc3654f178c67380d058f0b1168f7eb"}, "mark": {"type": "area", "color": "red"}, "encoding": {"opacity": {"value": 0.3}, "x": {"type": "quantitative", "field": "Time"}, "y": {"type": "quantitative", "field": "Disgust"}}}], "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json", "datasets": {"data-bbc3654f178c67380d058f0b1168f7eb": [{"Time": 0, "Angry": 0.03192256763577461, "Disgust": 0.00017067296721506864, "Fear": 0.044753599911928184, "Happy": 0.0026904302649199967, "Sad": 0.3870106041431427, "Surprise": 0.00038476788904517884, "Neutral": 0.5330673456192017}, {"Time": 1, "Angry": 0.09557403996586798, "Disgust": 0.0007138552173273639, "Fear": 0.08847616612911224, "Happy": 0.003892406704835594, "Sad": 0.7100295722484589, "Surprise": 0.002964376588352024, "Neutral": 1.0983496308326721}, {"Time": 2, "Angry": 0.16877923533320427, "Disgust": 0.0038758844166295603, "Fear": 0.12422049418091774, "Happy": 0.006497165537439287, "Sad": 1.050688087940216, "Surprise": 0.0062327227788046, "Neutral": 1.6397064924240112}, {"Time": 3, "Angry": 0.2625756077468395, "Disgust": 0.004607531722285785, "Fear": 0.18381410837173462, "Happy": 0.012258672970347106, "Sad": 1.4371021687984467, "Surprise": 0.007233711192384362, "Neutral": 2.0924083590507507}, {"Time": 4, "Angry": 0.3999207280576229, "Disgust": 0.008308548727654852, "Fear": 0.2515462264418602, "Happy": 0.013073981448542327, "Sad": 2.0201890766620636, "Surprise": 0.008434034534730017, "Neutral": 2.2985274642705917}, {"Time": 5, "Angry": 0.4775390811264515, "Disgust": 0.009358003400848247, "Fear": 0.3141508176922798, "Happy": 0.014460296428296715, "Sad": 2.486166775226593, "Surprise": 0.014396191225387156, "Neutral": 2.683928832411766}, {"Time": 6, "Angry": 0.5602937750518322, "Disgust": 0.009778475548955612, "Fear": 0.4083830490708351, "Happy": 0.0161065750871785, "Sad": 3.1089813113212585, "Surprise": 0.01725132006686181, "Neutral": 2.879205569624901}, {"Time": 7, "Angry": 0.6711916886270046, "Disgust": 0.010987125846440904, "Fear": 0.4927930682897568, "Happy": 0.01843294926220551, "Sad": 3.688403904438019, "Surprise": 0.021997738513164222, "Neutral": 3.0961936116218567}, {"Time": 8, "Angry": 0.7802419327199459, "Disgust": 0.012689887240412645, "Fear": 0.5700605362653732, "Happy": 0.020285842299927026, "Sad": 4.272892892360687, "Surprise": 0.026692463899962604, "Neutral": 3.3171365559101105}, {"Time": 9, "Angry": 0.8750275112688541, "Disgust": 0.015575727840769105, "Fear": 0.6593723595142365, "Happy": 0.021701967634726316, "Sad": 4.925536215305328, "Surprise": 0.05648123368155211, "Neutral": 3.4463051557540894}, {"Time": 10, "Angry": 0.9537158720195293, "Disgust": 0.01634453060978558, "Fear": 0.7077656835317612, "Happy": 0.0227548613329418, "Sad": 5.457616031169891, "Surprise": 0.05939267238136381, "Neutral": 3.7824105322360992}, {"Time": 11, "Angry": 1.0497342459857464, "Disgust": 0.017895369077450596, "Fear": 0.7645204626023769, "Happy": 0.024136667780112475, "Sad": 6.162500321865082, "Surprise": 0.06237284897360951, "Neutral": 3.918840318918228}, {"Time": 12, "Angry": 1.1371652074158192, "Disgust": 0.019682128782733344, "Fear": 0.8268386088311672, "Happy": 0.025095065939240158, "Sad": 6.824233889579773, "Surprise": 0.06458807492163032, "Neutral": 4.102397233247757}, {"Time": 13, "Angry": 1.265411589294672, "Disgust": 0.030776590909226798, "Fear": 0.9253826253116131, "Happy": 0.025997848249971867, "Sad": 7.4720622301101685, "Surprise": 0.07752718066330999, "Neutral": 4.202842220664024}, {"Time": 14, "Angry": 1.387386742979288, "Disgust": 0.032943212063401006, "Fear": 1.0255857668817043, "Happy": 0.03116448177024722, "Sad": 7.958531737327576, "Surprise": 0.08810865820851177, "Neutral": 4.476279690861702}, {"Time": 15, "Angry": 1.5061095617711544, "Disgust": 0.03802254247420933, "Fear": 1.0898553170263767, "Happy": 0.04207153571769595, "Sad": 8.509028851985931, "Surprise": 0.0974035341059789, "Neutral": 4.717509001493454}, {"Time": 16, "Angry": 1.5678981095552444, "Disgust": 0.040384821928455494, "Fear": 1.1404442451894283, "Happy": 0.04687480162829161, "Sad": 9.289949893951416, "Surprise": 0.09890797559637576, "Neutral": 4.815540470182896}, {"Time": 17, "Angry": 1.7013448476791382, "Disgust": 0.04305130858847406, "Fear": 1.2151341699063778, "Happy": 0.05075036967173219, "Sad": 9.943507492542267, "Surprise": 0.10156953113619238, "Neutral": 4.944642536342144}, {"Time": 18, "Angry": 1.797904334962368, "Disgust": 0.046459899851470254, "Fear": 1.2682264260947704, "Happy": 0.05268914997577667, "Sad": 10.69460541009903, "Surprise": 0.10358295764308423, "Neutral": 5.036531992256641}, {"Time": 19, "Angry": 1.910470925271511, "Disgust": 0.05537767299392726, "Fear": 1.3275141194462776, "Happy": 0.05655023455619812, "Sad": 11.275725603103638, "Surprise": 0.10770693642552942, "Neutral": 5.266654722392559}, {"Time": 20, "Angry": 2.06953714042902, "Disgust": 0.05738972952531185, "Fear": 1.397597685456276, "Happy": 0.06255309144034982, "Sad": 11.820222914218903, "Surprise": 0.11053687415551394, "Neutral": 5.482162795960903}, {"Time": 21, "Angry": 2.1613808423280716, "Disgust": 0.06750191083119716, "Fear": 1.4661135748028755, "Happy": 0.0654117981903255, "Sad": 12.552249729633331, "Surprise": 0.11409683886449784, "Neutral": 5.573245547711849}, {"Time": 22, "Angry": 2.2930967956781387, "Disgust": 0.06985500930750277, "Fear": 1.5210564509034157, "Happy": 0.06922686006873846, "Sad": 13.107573330402374, "Surprise": 0.1177175078773871, "Neutral": 5.821474261581898}, {"Time": 23, "Angry": 2.4029814526438713, "Disgust": 0.071319911381579, "Fear": 1.594204142689705, "Happy": 0.08148750476539135, "Sad": 13.54827430844307, "Surprise": 0.12248243077192456, "Neutral": 6.179250486195087}, {"Time": 24, "Angry": 2.5487984344363213, "Disgust": 0.07444752867741045, "Fear": 1.676107719540596, "Happy": 0.08796004252508283, "Sad": 13.990489721298218, "Surprise": 0.12901144952047616, "Neutral": 6.493185348808765}, {"Time": 25, "Angry": 2.6485030725598335, "Disgust": 0.07712152994645294, "Fear": 1.7259981520473957, "Happy": 0.09287739964202046, "Sad": 14.523083090782166, "Surprise": 0.13196848740335554, "Neutral": 6.800448454916477}, {"Time": 26, "Angry": 2.754995457828045, "Disgust": 0.08075261813064571, "Fear": 1.822998221963644, "Happy": 0.11087805265560746, "Sad": 14.924909085035324, "Surprise": 0.1503189526265487, "Neutral": 7.1551478281617165}, {"Time": 27, "Angry": 2.88903921097517, "Disgust": 0.08439766521041747, "Fear": 1.917718518525362, "Happy": 0.1165918274782598, "Sad": 15.412092924118042, "Surprise": 0.15834526380058378, "Neutral": 7.421814776957035}, {"Time": 28, "Angry": 2.994621828198433, "Disgust": 0.08519540556881111, "Fear": 2.006206799298525, "Happy": 0.12231643497943878, "Sad": 15.865636020898819, "Surprise": 0.16347919672261924, "Neutral": 7.7625444903969765}, {"Time": 29, "Angry": 3.08132067322731, "Disgust": 0.09296613994229119, "Fear": 2.115217287093401, "Happy": 0.23706276714801788, "Sad": 16.420202642679214, "Surprise": 0.17681804567109793, "Neutral": 7.876412585377693}, {"Time": 30, "Angry": 3.1781094074249268, "Disgust": 0.09420889957982581, "Fear": 2.1810877211391926, "Happy": 0.24541880190372467, "Sad": 16.956839352846146, "Surprise": 0.1805855572456494, "Neutral": 8.16375045478344}, {"Time": 31, "Angry": 3.2678567320108414, "Disgust": 0.09681884355086368, "Fear": 2.212523888796568, "Happy": 0.2535467026755214, "Sad": 17.613213926553726, "Surprise": 0.18399821210186929, "Neutral": 8.37204197049141}]}};
      var embedOpt = {"mode": "vega-lite"};

      function showError(el, error){
          el.innerHTML = ('<div class="error" style="color:red;">'
                          + '<p>JavaScript Error: ' + error.message + '</p>'
                          + "<p>This usually means there's a typo in your chart specification. "
                          + "See the javascript console for the full traceback.</p>"
                          + '</div>');
          throw error;
      }
      const el = document.getElementById('vis');
      vegaEmbed("#vis", spec, embedOpt)
        .catch(error => showError(el, error));

  </script>
</body>
</html>